<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border:1px solid #000;
            margin-top: 200px;
        }
        .bg{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="bg">
    <canvas width="500" height="400" id="canvas" style="">
        您的浏览器不支持canvas，请更新！
    </canvas>
</div>
</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    var progress=0;
    //创建图片对象
    var p1=new Image();
    var p2=new Image();
    var p3=new Image();
    var p4=new Image();
    //下载图片
    p1.src="img/1.jpg";
    p2.src="img/2.jpg";
    p3.src="img/3.jpg";
    p4.src="img/4.jpg";
    //为图片对象绑定onload事件
    p1.onload=function () {
        draw()
    }
    p2.onload=function () {
        draw()
    }
    p3.onload=function () {
        draw()
    }
    p4.onload=function () {
        draw()
    }
    //draw函数
    function draw(){
        progress+=25;
        if(progress==100){
            ctx.drawImage(p1,0,0,100,80);
            ctx.drawImage(p2,400,0,100,80);
            ctx.drawImage(p3,0,320,100,80);
            ctx.drawImage(p4,400,320,100,80);
        }
    }
</script>
</html>